import React, { useMemo } from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls, Stats } from '@react-three/drei';
import CabinetManager from './cabinet/CabinetManager';
import FacilityManager from '../features/facility/FacilityManager';
import TechWall from './TechWall';
import TechFloor from './TechFloor';
import TechBackground from './TechBackground';
import { CabinetData, EnvironmentalSensor, PowerDevice, HVACDevice } from '../../types';
import { generateCabinets, generateEnvironmentalSensors, generatePowerDevices, generateHVACDevices } from '../../utils/dataGenerator';

interface ThreeDServerRoomProps {
  cabinets?: CabinetData[];
  environmentalSensors?: EnvironmentalSensor[];
  powerDevices?: PowerDevice[];
  hvacDevices?: HVACDevice[];
  onCabinetSelect?: (cabinetId: string) => void;
  selectedCabinetId?: string;
}

const ThreeDServerRoom: React.FC<ThreeDServerRoomProps> = ({
  cabinets = [],
  environmentalSensors = [],
  powerDevices = [],
  hvacDevices = [],
  onCabinetSelect,
  selectedCabinetId
}) => {
  // 使用useMemo缓存默认数据，避免每次渲染都重新生成
  const defaultCabinets = useMemo(() => generateCabinets(), []);
  const defaultSensors = useMemo(() => generateEnvironmentalSensors(), []);
  const defaultPowerDevices = useMemo(() => generatePowerDevices(), []);
  const defaultHvacDevices = useMemo(() => generateHVACDevices(), []);
  
  // 使用传入的数据或默认数据
  const displayCabinets = useMemo(() => 
    cabinets.length > 0 ? cabinets : defaultCabinets,
    [cabinets, defaultCabinets]
  );
  
  const displaySensors = useMemo(() => 
    environmentalSensors.length > 0 ? environmentalSensors : defaultSensors,
    [environmentalSensors, defaultSensors]
  );
  
  const displayPowerDevices = useMemo(() => 
    powerDevices.length > 0 ? powerDevices : defaultPowerDevices,
    [powerDevices, defaultPowerDevices]
  );
  
  const displayHvacDevices = useMemo(() => 
    hvacDevices.length > 0 ? hvacDevices : defaultHvacDevices,
    [hvacDevices, defaultHvacDevices]
  );
  
  // 定义墙的高度
  const wallHeight = 3;
  // 计算墙的y位置，使其底部贴合地板
  const wallYPosition = wallHeight / 2;

  return (
    <Canvas
      style={{
        width: '100%',
        height: '100vh',
        backgroundColor: '#010309',
        display: 'block'
      }}
      camera={{
        position: [15, 10, 15],
        fov: 45
      }}
    >
      <ambientLight intensity={0.5} />
      <directionalLight position={[5, 10, 5]} intensity={0.2} castShadow />
      
      {/* 科技感墙面 - 前墙 */}
      <TechWall
        width={15}
        height={wallHeight}
        depth={0.3}
        position={[0, wallYPosition, -7.5]}
        rotation={[0, 0, 0]}
        lineDensity={15}
      />
      
      {/* 科技感墙面 - 后墙 */}
      <TechWall
        width={15}
        height={wallHeight}
        depth={0.3}
        position={[0, wallYPosition, 7.5]}
        rotation={[0, Math.PI, 0]}
        lineDensity={15}
      />
      
      {/* 科技感墙面 - 左墙 */}
      <TechWall
        width={15}
        height={wallHeight}
        depth={0.3}
        position={[-7.5, wallYPosition, 0]}
        rotation={[0, Math.PI / 2, 0]}
        lineDensity={15}
      />
      
      {/* 科技感墙面 - 右墙 */}
      <TechWall
        width={15}
        height={wallHeight}
        depth={0.3}
        position={[7.5, wallYPosition, 0]}
        rotation={[0, -Math.PI / 2, 0]}
        lineDensity={15}
      />
      
      {/* 科技感地板 */}
      <TechFloor
        size={22}
        position={[0, 0, 0]}
        rotation={[-Math.PI / 2, 0, 0]}
        lineDensity={25}
      />
      
      {/* 渲染机柜 */}
      <CabinetManager 
        cabinets={displayCabinets} 
        selectedCabinetId={selectedCabinetId} 
        onCabinetSelect={onCabinetSelect}
      />
      
      {/* 渲染环境传感器、电力设备和HVAC设备 */}
      <FacilityManager 
        environmentalSensors={displaySensors}
        powerDevices={displayPowerDevices}
        hvacDevices={displayHvacDevices}
      />
      
      {/* 相机控制 */}
      <OrbitControls 
        enableDamping 
        dampingFactor={0.05} 
        enableZoom={true} 
        enablePan={true}
        minDistance={2} // 减小最小距离，让用户能够更近距离查看
        maxDistance={50} // 增大最大距离，让用户能够查看更大范围的场景
      />
      
      {/* 科技感背景 */}
      <TechBackground 
        size={100} 
        color="#010309" 
        lineColor="#29A0CA" 
        glowColor="#00f0ff" 
        lineDensity={30} 
      />
      
      {/* 性能监控组件 */}
      <Stats />
    </Canvas>
  );
};

export default React.memo(ThreeDServerRoom);